<template>
  <div>
    <a-upload
      name="file"
      :showUploadList="false"
      :multiple="false"
      :action="url"
      :headers="headers"
      @change="handleChange"
      v-if="action"
    >
      <a-button style="margin-right: 12px;margin-left: 12px"> <a-icon type="upload" /> 导入 </a-button>
    </a-upload>
    <a-button v-if="download" style="margin-right: 12px;" @click="downloads"> <a-icon type="download" /> 导出 </a-button>
    <a-button style="margin-right: 12px;" @click="downloadsModal" v-if="downloadModal"> <a-icon type="download" /> Excel模板 </a-button>
  </div>
</template>

<script>
import Vue from 'vue';
import { SIGN } from '@/api/request';
import { downloadExecl } from '@/api/oss';
// import storage from 'store';
import { AESEncrypt } from '@/utils/utils';
import { USERINFO, ACCESS_TOKEN } from '@/store/mutation-types';
import moment from 'moment';

const info = Vue.ls.get(USERINFO);
export default {
  props: {
    action: {
      type: String,
      default: ''
    },
    download: {
      type: String,
      default: ''
    },
    downloadModal: {
      type: String,
      default: ''
    },
    queryParams: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      headers: {
        ...SIGN,
        'X-Access-Token': AESEncrypt(Vue.ls.get(ACCESS_TOKEN)),
        'X-Access-UserId': AESEncrypt(info.uid)
      },
      url: ''
    };
  },
  created() {
    this.url = (process.env.NODE_ENV == 'development' ? 'http://wxbalyenjk.wenkangkeji.com/wxbapi' : process.env.VUE_APP_SERVER_URL) + this.action;
  },
  methods: {
    handleChange({ file }) {
      console.log(file, 'file');
      if (file.response instanceof Object) {
        this.$message.success(file.response.msg);
        this.$emit('change');
      }
    },
    downloads() {
      //
      downloadExecl(this.download, this.queryParams).then(res => {
        const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
        const filename = `${this.$route.meta.title}-${moment().format('YYYYMMDDHHmmss')}.xls`;

        if (window.navigator.msSaveOrOpenBlob) { // 兼容IE10
              navigator.msSaveBlob(blob, filename);
        } else {
          // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
          const elink = document.createElement('a');
          elink.download = filename;
          elink.style.display = 'none';
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        }
      });
    },
    downloadsModal() {
      downloadExecl(this.downloadModal).then(res => {
        const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
        const filename = `${this.$route.meta.title}-${moment().format('YYYYMMDDHHmmss')}-模板.xls`;

        if (window.navigator.msSaveOrOpenBlob) { // 兼容IE10
              navigator.msSaveBlob(blob, filename);
        } else {
          // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
          const elink = document.createElement('a');
          elink.download = filename;
          elink.style.display = 'none';
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        }
      });
    }
  }
};
</script>

<style>

</style>
